import React, { Component } from 'react'
import {HotListStyled} from './styledComponents'
import { Grid } from 'antd-mobile'

import hotlist3 from 'assets/hotlist3.jpg'
import { getHotList } from '../../api/home'
export default class HotList extends Component {
  state={
    data1:[]
  }
  componentDidMount(){
    getHotList()
     .then(res=>{
      const data= res.data.data.list
      this.setState({
        data1:data
      })
       
     })
  }
  render() {
    return (
      <HotListStyled>
        <header>精品菜谱</header>
        {/* <div>
          {
            this.state.data1.map(res=>{
              <div key={res.title}>
                  <figure>
                    <img src={hotlist2} />
                    <figcaption>{res.title}<span>收藏:{res.watch}</span></figcaption>
                  </figure>
              </div>
            })
          }
            
            
        </div> */}
        <Grid data={this.state.data1}
            columnNum={1}
            hasLine={false}
            renderItem={dataItem => (
              <div style={{ padding: '13px', width:'auto'}}>
                <img src={hotlist3} style={{ width: '145px', height: '98px' }}  />
                <div style={{ color: '#888', fontSize: '15px', marginTop: '12px' ,width:'100%'}}>
                  <span>{dataItem.title}</span> 
                  <h5>收藏数：{dataItem.watch}</h5>
                </div>
              </div>
          )}
        />
            
        
       
        
      </HotListStyled>
    )
  }
}
